<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    盒子模型  content padding  border  margin 

    content 设置的 width  和  height 

    padding  内边距  padding:10px;   padding-top:10px; 

    border:1px solid #333;  border-left:1px solid red; 

    margin:  外边距  margin的 设置 和 padding 类似 

    1. 垂直方向的 margin 会重叠(谁大听谁的)
    2. 嵌套 崩塌  你给子元素设置的 margin-top,作用到了 父元素身上 ////解决

    给父元素 设置 overflow:hidden; 

    行内元素  上下的 margin  和padding  不起作用 ,,水平方向 生效


    布局: 浮动   (块级元素同行展示) 
    float:left  和  right  

    1. 脱离文档流
    2. 不占据位置,下方元素要上移动,,但是下方元素的  文本  会环绕在 浮动元素周围 
    3. 没有办法再 撑起父元素高度了,,所以需要我们为父元素指定高度 
    4. 浮动元素 具备行内块元素的特性...如果没指定宽度,宽度由内容撑开.....通常我们会为其指定一个宽度 


    四幅图  列举了  浮动常见的情况 (卡住 )

    浮动的影响: 清除 1.  严格指定父类高度  2,给父类设置 overflow:hidden   3.  给所有浮动元素之后,追加同一个 空的 div ,对其设置 clear:both 
</body>
</html>